<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath }/css/mystyle5.css" rel="stylesheet" type="text/css">
 <script type="text/javascript" src="${pageContext.request.contextPath }/js/AjaxRequest.js"></script>
</head>
<body>
<video width="300px" height="200px" controls> 
  <source src="${video.url }"  type="video/mp4" >  
       你的浏览器不支持 video 标签。
   </video>
   <br><br>

   <br>
   
 <textarea title="输入限制200字" name="text" id="text"   rows="5"  cols="50" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)"></textarea>
 <div class="btn">
  <input id="btn" type="button" value="发表"  onclick="btn();"  >
 </div>
 
   

 <h3 style="clear:both">评论区</h3>
 <hr/>
<div id="box">
 
<ul id="ul1">
 <c:forEach items="${ comments}" var="comment">

 <li  > <img alt="" src="${comment.trainee.img}" class="smallimg">  ${comment.trainee.name} <fmt:formatDate value="${comment.time}" type="date" pattern="yyyy-MM-dd HH:mm:ss"  /> <div class="area"> <p>${comment.area }</p></div>  </li> 

</c:forEach>
 
</ul>

</div>

<script type="text/javascript">


 
var box=document.getElementById("box");
var text=document.getElementById("text");
var btn=document.getElementById("btn");
var ul=document.getElementById("ul1");
var divtime=document.createElement("div");
box.appendChild(ul);
  btn.onclick=function() {
	if(text.value.trim() ==''){
		alert("内容不为空!");
		return false;
	}
	 
	var date=new Date();
    var year = date.getFullYear();
    var yue = date.getMonth() + 1;
    var ri = date.getDate() ;
    var hour=date.getHours()<10 ? "0" + date.getHours() : date.getHours().toString();
    var min=date.getMinutes()< 10 ? "0" + date.getMinutes() : date.getMinutes().toString();
    var sec=date.getSeconds()< 10 ? "0" + date.getSeconds() : date.getSeconds().toString();
 
	 divtime=document.createTextNode(" "+year+"-"+yue+"-"+ri+""+ " "+hour+":"+min+":"+sec+"  ");
        var li = document.createElement("li");
       // li.innerHTML="name"+" "+year+"-"+yue+"-"+ri+""+ " "+hour+":"+min+":"+sec+"  "+text.value;
	
	//添加头像
        var aImg=document.createElement("img");
        aImg.className="smallimg"   
        aImg.src="${user.img}";
        
	//解决兼容问题
        var ali=ul.children;
        if(ali.length==0){
            ul.appendChild(li);
        }
        else{
            ul.insertBefore(li,ali[0]);
        }
       // var comment = document.createTextNode(text.value);
       var comment=document.createElement("div");
      // comment.classNmae="area";
      // comment.appendChild(document.createTextNode(text.value));
      comment.innerHTML="<p style='color: #0144B8;'>"+text.value+"</p>";
        	
        var name = document.createTextNode("${user.name}");
        
        li.appendChild(aImg);
        li.appendChild(name);
	    li.appendChild(divtime);
	    li.appendChild(comment);
       
        var area=text.value;
        var loader=new net.AjaxRequest("${pageContext.request.contextPath }/video/insertcomment.action?vid=${video.id}"+"&area="+area+"&nocache="+  new Date().getTime(), deal_btn, onerror, "GET");
        text.value='';
  }
  //字数限制
  function LimitTextArea(field){
	    maxlimit=200;
	    if (field.value.length > maxlimit)
	     field.value = field.value.substring(0, maxlimit);
	      
	 }
 
  
 function deal_btn(){
	 alert(this.req.responseText);
	// var id=session.getAttribute("openid");
	 //window.location.href="${pageContext.request.contextPath }/video/findvideobyid.action?id=${video.id}";
 }
 function onerror(){
	 alert("您的操作有误!");
 }

</script>
 
</body>
</html>